<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>swiper test</title>
  <link rel="stylesheet" href="css/swiper.min.css">
  <script src="js/swiper.min.js"></script>
  <style>
    .cc{
      position: relative;
    }
    .swiper-container {
      width: 600px;
      margin: 0 auto;
    }

    .swiper-wrapper {

    }

    img {
      display: block;
    }

    .swiper-slide {
      width: 200px;
    }

    .swiper-slide a{
      height: 350px;
      width: 300px;
    }

    .swiper-slide span {
      display: block;
      text-align: center;
      margin-top: 20px;
      line-height: 25px;
      font-size: 1.1em;
    }
  </style>
</head>

<body>
  <div class="cc">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#">
            <img src="imges/slide1.jpg" alt="">
            <!-- <img class="play_icon" src="icon/arr.png" alt=""> -->
            <span>slid0</span>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#">
            <img src="imges/slide2.jpg" alt="">
            <!-- <img class="play_icon" src="icon/arr.png" alt=""> -->
            <span>slid1</span>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#">
            <img src="imges/slide3.jpg" alt="">
            <!-- <img class="play_icon" src="icon/arr.png" alt=""> -->
            <span>slid2</span>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#">
            <img src="imges/slide4.jpg" alt="">
            <!-- <img class="play_icon" src="icon/arr.png" alt=""> -->
            <span>slid3</span>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#">
            <img src="imges/slide5.png" alt="">
            <!-- <img class="play_icon" src="icon/arr.png" alt=""> -->
            <span>slid4</span>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#">
            <img src="imges/slide6.jpg" alt="">
            <!-- <img class="play_icon" src="icon/arr.png" alt=""> -->
            <span>slid5</span>
          </a>
        </div>
      </div>
      <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    </div>
  </div>

  <script>
    var mySwiper = new Swiper('.swiper-container', {
      watchSlidesProgress: true,
      initialSlide: 2,
      loop: true, // 循环模式选项
      slidesPerView: "auto",
      centeredSlides: true,
      loopedSlides: 5,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        progress (siwper, progress) {
          for (i = 0; i < this.slides.length; i++) {
         
           
            var slide = this.slides[i]; // 获取到 当前的的 slid ?
            console.log("ssss",slide)
             slide = this.slides.eq(i); 
             console.log("s1222",slide)
            var slideProgress = this.slides[i].progress; //获取到当前 slide的progress
            console.log("slideProgress -- ",slideProgress);
            // modify = 1;
            console.log("slideProgress", slideProgress);

         
            translate = slideProgress * 300 + 'px';
            scale = 1 - Math.abs(slideProgress) / 5;
            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform('translateX(' + translate + ') scale(' + scale + ')');
            slide.css('zIndex', zIndex);
            slide.css('opacity', 1);
            if (Math.abs(slideProgress) > 1) {
              slide.css('opacity', 0);
            }else if(Math.abs(slideProgress) == 1 ){
              slide.css('opacity', 0.3);
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
          }
        }
      }
    })        
  </script>
</body>

</html>